<template>
  <view class="page-detail">
    <!-- 商品图片 -->
    <image class="product-image" src="/static/img/BodycheckImage/shop1.jpg" mode="widthFix"></image>

    <!-- 商品信息 -->
    <view class="product-info">
      <text class="price">￥100</text>
      <!-- VIP提示 -->
      <view class="vip-tip">
        <text>开通会员即可享受VIP价</text>
        <text>129/月立即开通 &gt;</text>
      </view>
      <text class="info-title">入职体检--太原市太航医院</text>
      <text class="description">急速入职，二甲公立，周六日体检周一出报告</text>
    </view>

    <!-- 医院信息 -->
    <view class="hospital-info">
      <image class="hospital-logo" src="/static/img/BodycheckImage/logo.png" mode="aspectFit"></image>
      <view class="hospital-details">
        <text class="hospital-name">太原市太航医院体检中心</text>
        <text class="hospital-address">山西省太原市小店区并州南路107号</text>
      </view>
    </view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-item active">详情</view>
      <view class="nav-item">购买须知</view>
      <view class="nav-item">评价</view>
    </view>

    <!-- 备注 -->
    <view class="note">
      <text>备注：购买后，必须在我的--商城订单--体检中填写预约人信息-预约时间。</text>
    </view>

    <!-- 适用对象 -->
    <view class="applicable-objects">
      <text class="section-title">适用对象</text>
      <view class="object-list">
        <view class="object-item">
          <image class="icon" src="/static/health.png" mode="aspectFit"></image>
          <text>亚健康人群</text>
        </view>
        <view class="object-item">
          <image class="icon" src="/static/male.png" mode="aspectFit"></image>
          <text>男性</text>
        </view>
        <view class="object-item">
          <image class="icon" src="/static/female.png" mode="aspectFit"></image>
          <text>女性</text>
        </view>
      </view>
    </view>

    <!-- 套餐项目 -->
    <view class="package-items">
      <text class="section-title">套餐项目</text>
      <view class="package-item">
        <text class="item-title">一般检查</text>
        <text class="item-description">血压、心率、身高、体重、BMI指数。</text>
      </view>
      <view class="package-item">
        <text class="item-title">内科</text>
        <text class="item-description">人体主要脏器心、肝、脾、肺、肾都在内科体检范围之内，对许多疾病和体征，如支气管炎、肺炎、胸膜炎、心律失常、心包炎、心肺功能不全、先天性心脏病、肝脾肿大、贫血、黄疸等有初步筛查和诊断作用。</text>
      </view>
      <view class="package-item">
        <text class="item-title">肝功能二项</text>
        <text class="item-description">反应是否有肝脏损害中最敏感的指标，1%的肝细胞发生坏死时，血清ALT水平即可升高1倍。AST持续升高，数值超过ALT往往提示肝实质损害亚重，是慢性化程度加重的标志。</text>
      </view>
      <view class="package-item">
        <text class="item-title">血常规23项</text>
        <text class="item-description">血常规检查包括有红细胞计数(RBC)、血红蛋白(Hb)、白细胞(WBC)、白细胞分类计数及血小板(PLT)等，对机体内许多病理改变都有敏感变化。</text>
      </view>
      <view class="package-item">
        <text class="item-title">十二导联心电图</text>
        <text class="item-description">心电图是临床最常用的检查之一，帮助诊断心律失常，心肌缺血、心肌梗死及部位，诊断心脏扩大、肥厚等。</text>
      </view>
      <view class="package-item">
        <text class="item-title">胸部X光检查</text>
        <text class="item-description">主要检查心、肺有无异常，最主要是发现结核。</text>
      </view>
      <view class="package-item">
        <text class="item-title">体检总结报告</text>
        <text class="item-description">体检总结评价及出具正规体检报告。</text>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <button class="action-button add-to-cart">加入购物车</button>
      <button class="action-button buy-now" @click="showSpecs = true">立即购买</button>
    </view>

    <!-- 商品规格模态框 -->
    <view class="modal-overlay" v-if="showSpecs" @click="showSpecs = false"></view>
    <view class="modal-content" v-if="showSpecs">
      <view class="modal-header">
        <text class="modal-title">商品规格</text>
        <button class="close-button" @click="showSpecs = false">&times;</button>
      </view>
      <view class="modal-body">
        <view class="spec-section">
          <image class="modal-product-image" src="/static/logo.png" mode="widthFix"></image>
          <view class="modal-product-details">
            <view class="spec-item">
              <text class="spec-label">项目名称：</text>
              <text class="spec-value">入职体检</text>
            </view>
            <view class="spec-item">
              <text class="spec-label">价格：</text>
              <text class="spec-value">￥100</text>
            </view>
            <view class="spec-item">
              <text class="spec-label">库存：</text>
              <text class="spec-value">{{ stock }}</text>
            </view>
            <view class="spec-item">
              <text class="spec-label">数量：</text>
              <view class="quantity-selector">
                <button class="quantity-button" @click="decreaseQuantity">-</button>
                <input type="number" v-model="quantity" min="1" :max="stock" class="quantity-input" />
                <button class="quantity-button" @click="increaseQuantity">+</button>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="modal-footer">
        <button class="action-button confirm-button" @click="confirmPurchase()">确认购买</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showSpecs: false,
      quantity: 1,
      stock: 50,
    };
  },
  methods: {
    decreaseQuantity() {
      if (this.quantity > 1) {
        this.quantity--;
      }
    },
    increaseQuantity() {
      if (this.quantity < this.stock) {
        this.quantity++;
      }
    },
    confirmPurchase() {
      // 在这里处理确认购买的逻辑
	  console.log("aaa")
	    uni.navigateTo({
	      url: '/pages/Hoem/Bodycheck/shopping/Order/Order',
	    });

    }
  }
};
</script>

<style scoped>
.page-detail {
  background-color: #fff;
  padding: 20px;
  position: relative; /* 添加相对定位以便绝对定位子元素 */
  min-height: 100vh; /* 确保页面至少占满整个视口高度 */
}

.product-image {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 20px;
}

.product-info {
  margin-bottom: 20px;
}

.price {
  font-size: 24px;
  color: #ff6700;
  margin-bottom: 10px;
}

.info-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.description {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

.vip-tip {
  background-color: #ffe0e0;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.hospital-info {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
}

.hospital-logo {
  width: 60px;
  height: 60px;
  margin-right: 20px;
}

.hospital-details {
  flex: 1;
}

.hospital-name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.hospital-address {
  font-size: 16px;
  color: #666;
}

.nav-bar {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.nav-item {
  padding: 10px;
  cursor: pointer;
  transition: color 0.3s;
}

.nav-item:hover {
  color: #007aff;
}

.active {
  border-bottom-color: #007aff;
  color: #007aff;
}

.note {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  margin-bottom: 20px;
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.object-list {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.object-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.icon {
  width: 60px;
  height: 60px;
  margin-right: 20px;
}

.package-items {
  margin-bottom: 80px; /* 确保内容不会被底部按钮遮挡 */
}

.package-item {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.item-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.item-description {
  font-size: 18px;
  color: #666;
}

.bottom-buttons {
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 10px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* 确保按钮始终在顶部 */
}

.action-button {
  width: 48%;
  height: 50px;
  border-radius: 10px;
  text-align: center;
  line-height: 50px;
  border: none;
  cursor: pointer;
  font-size: 18px;
  transition: background-color 0.3s;
}

.add-to-cart {
  background-color: #ff6700;
  color: #fff;
}

.add-to-cart:hover {
  background-color: #d84a05;
}

.buy-now {
  background-color: #007aff;
  color: #fff;
}

.buy-now:hover {
  background-color: #005fa3;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.modal-content {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 20px;
  z-index: 1000;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modal-title {
  font-size: 24px;
  font-weight: bold;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.modal-body {
  margin-bottom: 20px;
}

.spec-section {
  display: flex;
  flex-wrap: wrap;
}

.modal-product-image {
  width: 100%;
  max-width: 200px;
  border-radius: 10px;
  margin-right: 20px;
}

.modal-product-details {
  flex: 1;
}

.spec-item {
  margin-bottom: 10px;
}

.spec-label {
  font-weight: bold;
}

.spec-value {
  margin-left: 10px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
}

.confirm-button {
  width: 100%;
  height: 50px;
  border-radius: 10px;
  text-align: center;
  line-height: 50px;
  border: none;
  cursor: pointer;
  font-size: 18px;
  background-color: #007aff;
  color: #fff;
  transition: background-color 0.3s;
}

.confirm-button:hover {
  background-color: #005fa3;
}
</style>



